<template>
  <div class="home">
  <HomeTop/>
  <div class="page-body">
    <el-container>
      <!-- 左侧菜单项 -->
      <el-aside>
        <div class="choices">
          <router-link to="/">数字迎新网</router-link>
        </div>
        <div class="choicex">
          <el-row class="tac">
          <el-menu
            :default-active="defaultActive"
            class="el-menu-vertical-demo"
            style="width: 100%;"
          >
            <el-menu-item index="1" @click="debouncedLoadContent('1')">
              <el-icon><location /></el-icon>
              <span>数字迎新平台操作须知</span>
            </el-menu-item>
            <el-menu-item index="2" @click="debouncedLoadContent('2')">
              <el-icon><document /></el-icon>
              <span>入学须知</span>
            </el-menu-item>
            <el-menu-item index="3" @click="debouncedLoadContent('3')">
              <el-icon><CreditCard /></el-icon>
              <span>财务缴费</span>
            </el-menu-item>
            <el-menu-item index="4" @click="debouncedLoadContent('4')">
              <el-icon><FirstAidKit /></el-icon>
              <span>学生保险</span>
            </el-menu-item>
            <el-menu-item index="5" @click="loadContent('5')">
              <el-icon><PhoneFilled /></el-icon>
              <span>报到咨询电话</span>
            </el-menu-item>
          </el-menu>
          </el-row>
        </div>
      </el-aside>
      <!-- 文章显示 -->
      <el-main>
        <h1>{{ articleTitle }}</h1>
        <el-divider />
        <p class="content">{{ articleContent }}</p>
      </el-main>
    </el-container> 
  </div>
  <HomeBottom/>
  </div>
</template>
  
<script>
  import HomeTop from '@/components/HomeTop.vue';
  import HomeBottom from '@/components/HomeBottom.vue';
  import { ElMessage } from 'element-plus';
  import { debounce } from 'lodash';
  import { getnews } from '@/api/index/admin';
  
  export default {
    name: 'OperationIns',
    components: {
      HomeTop,HomeBottom
    },
    data() {
      return {
        defaultActive: this.$route.params.defaultActive || "1", // 设置默认的active菜单项
        articleTitle: '',
        articleContent: '' // 初始化articleContent为空字符串
      };
    },
    methods: {
    debouncedLoadContent: debounce(function(index) {
      this.defaultActive = index;
      this.loadContent(index); // 调用loadContent方法获取文章内容
    }, 300),
    async loadContent(index) {
      try {
        console.log(index)
        console.log()
        const response = await getnews({id:index});
        console.log(response)
        this.articleTitle = response.data.data[0].TITLE;// 读取标题并赋值给 articleTitle
        this.articleContent = response.data.data[0].CONTENT; // 读取内容并赋值给 articleContent
        console.log(this.articleContent)
      } catch (error) {
        this.articleTitle = '加载错误';
        this.articleContent = '';
        ElMessage.error('文章加载错误');
        console.error('Error fetching article content', error);
      }
    }
  },
  created() {
    this.loadContent(this.defaultActive); // 传入文章的索引来加载对应的标题和内容
  }
  }
</script>
  
<style scoped>

.content {
  white-space: pre-wrap;
  text-indent: 2em;
}

  .home{
    background-color: #F2F1F1;
  }
  .page-body{
    max-width: 1600px;
    margin: 0px auto;
    padding: 40px 0;
    position:relative;
  }
  /* 左侧菜单项设置 */
  el-aside{
    width: 48%;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: #FFFFFF;
    padding: 10px;
  }
  .choices{
    width: 100%;
    height: 70px;
    background-color: #006633;
    line-height: 70px;
    margin: 0 0 20px 0;
  }
  .el-menu-vertical-demo .el-menu-item.is-active {
    background-color: #006633 !important;
    color: #FFFFFF;
    border-radius:0px !important;
    margin:0px;
    width:100%;
  }
  .el-menu-vertical-demo .el-menu-item:hover {
    background-color: #006633 !important; 
  }
  .el-menu-vertical-demo .el-menu-item {
    line-height: 70px !important;
    height: auto !important;
    font-size: 16px;
  }
/* 点击时去掉下划线 */
  .router-link-active {     
    text-decoration: none;
  }
/* 去掉原有链接文字下划线 */
  a {
    text-decoration: none; 
    color: #FFFFFF;
    font-size: 1.5em;
    font-weight: bold;
  }
  .el-main{
    background-color: #FFFFFF;
    margin-left: 20px;
    height: auto;
  }
  p{
    text-align: left;
    word-wrap: break-word; /* 当内容超出容器宽度时自动换行 */
  }
</style>